<template>
  <div class="ehl_view">
    <!-- 大数据选择组件 -->
    <div class="ehl_view_item">
      <ehl-big-data-select :value="bigdata" />
    </div>
    <!-- 各种按钮示例 -->
    <div class="ehl_view_item">
      <div class="cpt_btn_ico icon-a-svg73 cpt_margin_10"></div>
      <div
        class="cpt_btn_blue cpt_btn_ico icon-a-svg74 cpt_margin_10 cpt_tooltip"
        tooltip-data="蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮蓝色按钮"
        >蓝色按钮
      </div>
      <div
        class="cpt_btn_blue cpt_margin_10"
        @click="$i18n.locale === 'zh' ? ($i18n.locale = 'en') : ($i18n.locale = 'zh')"
      >
        切换中英文-{{ $t('message.title') }}
      </div>
      <div class="cpt_btn_blue_white cpt_margin_10" @click="inclipboard"
        >蓝白按钮-剪切板复制</div
      >
      <div class="cpt_btn_white cpt_margin_10">白色按钮</div>
      <div class="cpt_btn_disable cpt_margin_10">禁用按钮</div>
    </div>
    <!-- 表单示例 -->
    <div class="ehl_view_item">
      <ehl-form
        ref="form"
        :options="form.options"
        :data="form.data"
        :disabled="form.disabled"
        :labelWidth="form.labelWidth"
        :inlineMessage="form.inlineMessage"
        custom-class="custom-class resizetest"
        :resizeShow="true"
        :resizeMinWidth="'150'"
        :resizeMaxWidth="'800'"
      >
        <!-- 表单头的插槽 -->
        <template v-slot:form_header="{ data }">
          <div>表单头的插槽-{{ data.current }}</div>
        </template>
        <!-- 表项上面的插槽，从0开始，每个表项上面都有一个 -->
        <template v-slot:head_0="{ data }">
          <div>表项上面的的插槽-{{ data.current }} </div>
        </template>
        <!--表项下面的插槽，从0开始，每个表项下面都有一个 -->
        <template v-slot:0="{ data }">
          <div>表项下面的的插槽-{{ data.current }} </div>
        </template>
        <!-- 纯展示/自定义的插槽，名字为对应的key -->
        <template v-slot:label>
          <!-- <div>纯展示/自定义的插槽-{{ data.current }}</div> -->
        </template>
        <!-- 纯展示/自定义的插槽，名字为对应的key -->
        <template v-slot:wenhao>
          <div
            :style="{ display: 'flex', 'justify-content': 'center' }"
            class="cpt_btn_ico icon-a-svg9 cpt_margin_10"
            title="这是提示"
          ></div>
        </template>
        <!-- 时间选择框多功能的插槽 -->
        <template v-slot:date="{ data }">
          <div>{{ data.current }}</div>
        </template>
        <!-- 单选框插槽 -->
        <template v-slot:rrr="{ data }">
          <el-radio :label="data.current.options.custom">
            {{ data.current.options.custom }}
          </el-radio>
        </template>
        <!-- 多选框插槽 -->
        <template v-slot:sss="{ data }">
          <el-checkbox :label="data.current.options.custom">
            {{ data.current.options.custom }}
          </el-checkbox>
        </template>
        <!-- 表单的按钮的插槽 -->
        <template v-slot:btn="{ data }">
          <div class="slot_btn">
            <div class="ehl_btn_size_middle ehl_btn_white ehl_margin_10">
              取消-{{ data.current.abc }}
            </div>
            <div class="ehl_btn_size_middle ehl_btn_white" @click="validate(data)">
              确定
            </div>
          </div>
        </template>
      </ehl-form>
    </div>
    <!-- 组件示例 -->
    <div class="ehl_view_item">
      <ehl-form
        ref="form2"
        :options="form.options2"
        :data="form.data"
        :labelWidth="form.labelWidth"
        :inlineMessage="form.inlineMessage"
        custom-class="custom-class"
      >
        <!-- 表格的操作的插槽,名字可以自定义 -->
        <template v-slot:table="{ data }">
          <div>{{ data.current.checked }}</div>
          <!-- 气泡确认框 -->
          <ehl-popconfirm
            :data="data.current"
            title="确定删除吗？"
            @confirm="val => {}"
            @cancel="val => {}"
          >
            <div>删除</div>
          </ehl-popconfirm>
        </template>
        <!-- 表格的自定义列插槽 -->
        <template v-slot:customcolum="{ data }">
          <input v-model="data.current.value" />
        </template>
        <!-- 搜索树的上中下的插槽 -->
        <template v-slot:tree0="{ data }">
          <div>搜索树的上插槽-{{ data.current.a }}</div>
        </template>
        <!-- <template v-slot:tree1="{ data }">
          <div>搜索树的中插槽-{{ data.current }}</div>
        </template> -->
        <!-- <template v-slot:tree2="{ data }">
          <div>搜索树的下插槽-{{ data.current }}</div>
        </template> -->
        <!-- 搜索树的下叶子数据格式 -->
        <template v-slot:tree_root="{ data }">
          <span :style="{ 'margin-right': '10px' }" class="cpt_btn_ico iconquanbu"></span
          ><span v-contextmenu="contextmenu2" :local="data">{{
            data.current.data.label
          }}</span>
        </template>
        <template v-slot:tree_leaf="{ data }">
          <span :style="{ 'margin-right': '10px' }" class="cpt_btn_ico iconquanbu"></span
          ><span>{{ data.current.data.label }}</span>
        </template>
        <!-- 九宫格插槽 -->
        <template v-slot:tiling="{ data }">
          <div style="width: 100px; border: 1px solid red">
            {{ data.current.a + '-asdasd' }}
          </div>
        </template>
        <!-- 多选tabs插槽 -->
        <template v-slot:multabs_multabs="{ data }">
          <div>{{ data.current.item[data.current.labelKey] }} </div>
        </template>
        <!-- pdf分页插槽 -->
        <template v-slot:pdf_pdf_page="{ data }">
          <div>{{ data.current.page }} </div>
        </template>
        <!-- 上传组件插槽-选择框 -->
        <template v-slot:upload="{ data }">
          <span class="cpt_grey_background" :style="{ 'margin-right': '10px' }">
            选择路径{{ data.current.list }}
          </span>
          <span class="cpt_btn_blue" :style="{ 'flex-shrink': 0 }">选择文件</span>
        </template>
        <!-- 上传组件插槽-提示 -->
        <template v-slot:upload_tip>
          <div> 不要超过1000T</div>
        </template>
        <!-- 上传组件插槽-自定义内容 -->
        <template v-slot:upload_div="{ data }">
          <div> 自定义文件列表样式看这里-{{ data.current.list }}</div>
        </template>
        <!-- 表单的按钮的插槽 -->
        <template v-slot:btn="{ data }">
          <div class="slot_btn">
            <div class="ehl_btn_size_middle ehl_btn_white ehl_margin_10">
              取消-{{ data.current.abc }}
            </div>
            <div class="ehl_btn_size_middle ehl_btn_white" @click="validate(data)">
              确定
            </div>
          </div>
        </template>
      </ehl-form>
    </div>
    <!-- 可放大图片 -->
    <div class="ehl_view_item" :style="{ height: '100px', width: '100px' }">
      <ehl-image :src="src"></ehl-image>
    </div>
    <!-- 柱线图示例 -->
    <div class="ehl_view_item" :style="{ height: '400px' }">
      <ehl-line :options="line.line" :reverse="true" size="grow" />
    </div>
    <!-- 饼状图示例 -->
    <div class="ehl_view_item" :style="{ height: '400px' }">
      <ehl-pie :options="pie.pie" size="grow" />
    </div>
    <!-- 流程图 -->
    <div class="ehl_view_item">
      <ehl-drag-graph
        v-model="graph.data"
        :style="{ width: '100%', height: '600px' }"
        @nodeClick="graph.nodeClick"
        @edgeClick="graph.edgeClick"
        :validateEdge="
          (edge, edges) => {
            return true
          }
        "
      ></ehl-drag-graph>
    </div>
    <!-- 抽屉弹窗示例 -->
    <div class="ehl_view_item">
      <div @click="drawerConfig.show = true">显示抽屉弹窗</div>
    </div>
    <!-- 弹出框示例 -->
    <div class="ehl_view_item"><div @click="dialog.show = true">显示弹窗</div></div>
    <!-- 抽屉弹出框 -->
    <drawer-log-list v-if="drawerConfig.show" :drawerConfig="drawerConfig">
      <template v-slot:operate>
        <div class="ehl_btn_size_small ehl_btn_blue" @click="dialog.show = false"
          >保存</div
        >
      </template>
    </drawer-log-list>
    <!-- 弹出框 -->
    <ehl-dialog-box
      custom-class="my_dialog"
      :title="dialog.title"
      :show="dialog.show"
      @cancel="dialog.show = false"
      @commit="dialog.show = false"
    >
      删除后系统会自爆
      <!-- <div v-for="i in dialog.num" :key="i"> ascascsac{{ i }}</div> -->
      <template v-slot:operate>
        <div class="ehl_btn_size_small ehl_btn_blue" @click="dialog.show = false"
          >保存</div
        >
      </template>
    </ehl-dialog-box>
  </div>
</template>
<script>
  import edit from './edit.vue'
  import { Input } from 'element-ui'
  Vue.use(Input)

  import ehlForm from '@/common'
  import form from '@/common/demo/form.js'
  import line from '@/common/demo/line.js'
  import pie from '@/common/demo/pie.js'

  import Vue from 'vue'
  import { Component } from 'vue-property-decorator'

  import { RSAencode, RSAdecode } from '@/common/utils/api.js'

  import { inClipboard } from '@/common/utils/api.js'

  import QuarterPicker from '@/common/utils/lib/quarter-picker.js'
  Vue.use(QuarterPicker)

  @Component({
    components: {
      edit,
      ehlForm,
      ehlImage: () => $import('ehlImage'),
      ehlLine: () => $import('ehlLineBar'),
      ehlPie: () => $import('ehlPie'),
      ehlDialogBox: () => $import('ehlDialogBox'),
      ehlExcel: () => $import('ehlExcel'),
      ehlDragGraph: () => $import('ehlDragGraph'),
      ehlPopconfirm: () => $import('ehlPopconfirm'),
      ehlBigDataSelect: () => $import('ehlBigDataSelect'),
    },
    beforeRouteEnter(to, from, next) {
      $setStore('waiting', false)
      next()
    },
    watch: {
      'datapick.value1': function (val, old) {
        console.log(val)
      },
    },
  })
  export default class DemoComponent extends Vue {
    inclipboard() {
      inClipboard('qweqweqweqwe')
    }
    datapick = { value1: ['2012-02', '2023-02'] }
    bigdata = {
      tabs1: [{ id: 3, lab: 'qwe3' }],
      tabs2: [{ id: 4, lab: 'qwe4' }],
      table: [{ checked: false, dataLinkName: 'qwe' }],
    }
    src = require('@/common/assets/noright.png')
    divable = {
      value: 'pdfpath',
      style: { width: '100%', height: '100px', border: '1px solid black' },
    }
    code = `select * from abc`
    dialog = { num: 5, title: '确定删除吗', show: false }
    drawerConfig = { title: '抽屉弹出框', show: false, direction: 'rtl' } //ltr从左往右开,rtl从右往左开,ttb从上往下开,btt从下往上开
    graph = {
      data: [],
      nodeClick: function (data) {
        // debugger
      },
      edgeClick: function (data) {
        // debugger
      },
    }
    line = new line()
    pie = new pie()
    contextmenu2 = [
      {
        text: '菜单1',
        handler: data => {
          debugger
        },
      },
      {
        text: '菜单2',
        handler: data => {
          debugger
        },
      },
      {
        text: '菜单3',
        handler: data => {
          debugger
        },
      },
    ]
    form = new form({
      editDiv: [
        { id: 111, label: '可编辑div11' },
        { id: 222, label: '可编辑div22' },
      ],
      multabs: [],
      rich: '<p><b>查看<u>上次就卡</u>死南<i>极考察年卡机身</i>内存接口</b></p>',
      selectLazyTree: [
        {
          value: 1,
          label: '一级 11',
        },
      ],
      cron: { cron: '00 00 08,09,10,11,12,13 * * ?', config: '' },
      shuttle: [
        {
          label: '一级 1',
        },
      ],
      label: '',
      input: 'qweqw',
      autocomplete: 'asdasd2',
      select: [
        { id: 1, lab: 'qwe1' },
        { id: 2, lab: 'qwe2' },
      ],
      // date: ['2021-11-15 02:12:00', '2021-11-18 02:12:00'],
      // date: ['01:27:00', '03:27:00'],
      date: '',
      editbox: [{ input: 'qweqw' }, { input: '123123123' }],
      selecttree: [
        { id: 11, lab: 'qwe11' },
        { id: 12, lab: 'qwe12' },
      ],
      inputNumber: 50,
      radioGroup: '自定义单选',
      checkGroup: ['自定义多选', 2],
      ehlCusTable: [
        {
          index: 1,
          check: true,
          label: 'true',
          input: 'true',
          select: { id: 1, lab: 'qwe1' },
        },
        // {
        //   index: {
        //     show: true,
        //     value: 1,
        //     type: '',
        //     disableFlag: false,
        //   },
        //   check: { show: true, value: true, type: '', disableFlag: true },
        //   label: {
        //     show: true,
        //     value: '',
        //     type: '',
        //     disableFlag: true,
        //   },
        //   input: { show: true, value: 'true', type: '', disableFlag: true },
        //   select: {
        //     show: false,
        //     value: { id: 1, lab: 'qwe1' },
        //     type: '',
        //     disableFlag: true,
        //   },
        // },
      ],
      mulTable: [
        {
          checked: true,
          input: 'qweqwe',
          inputNumber: 5,
          select: {},
          selecttree: [],
          label: '纯展示文本1',
          check: true,
          operate: '删除',
        },
      ],
      table: [
        {
          checked: false,
          dataLinkName: 'de0657b',
          datasetName: '1111',
        },
        {
          checked: true,
          dataLinkName: '28e71826dd32',
          datasetName: '005',
        },
      ],
      tiling: [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 4 }],
      code: 'select * from asd',
      tree: [
        {
          label: '二级 1-2',
        },
      ],
    })
    mounted() {
      let tmp = '123123123'
      let aa = RSAencode(tmp)
      console.log(aa)
      console.log(RSAdecode(aa))
      // this.$refs.form.addParam({ label_slot: this.label_slot })
      // this.$refs.form.addParam({ showData: this.showData })
      // this.$refs.form.addParam({ vue: this })

      if ('geolocation' in navigator) {
        // 浏览器支持 Geolocation
        navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
      } else {
        // 浏览器不支持 Geolocation
        console.log('Geolocation is not supported by this browser.')
      }
    }
    
    successCallback(position) {
      debugger
      const latitude = position.coords.latitude
      const longitude = position.coords.longitude

      // 使用经纬度信息，例如将坐标传给地图API显示位置
      displayLocation(latitude, longitude)
    }

    // 获取位置失败时的回调函数
    errorCallback(error) {
      debugger
      switch (error.code) {
        case error.PERMISSION_DENIED:
          console.log('User denied the request for Geolocation.')
          break
        case error.POSITION_UNAVAILABLE:
          console.log('Location information is unavailable.')
          break
        case error.TIMEOUT:
          console.log('The request to get user location timed out.')
          break
        case error.UNKNOWN_ERROR:
          console.log('An unknown error occurred.')
          break
      }
    }
    displayLocation(lat, lon) {
      // 这里可以使用经纬度调用地图API，比如百度地图API来展示具体地址
      // 或者做其他基于位置的操作
    }
    handleSearch() {
      // this.filteredData = this.originalData.filter(item => this.matchKeyword(item))
      this.filteredData = this.originalData
    }

    label_slot(data) {
      console.log(data.current)
      debugger
    }
    showData(data) {
      debugger
    }
    async validate(data) {
      console.log(data)
      try {
        let re = await this.$refs.form.validate()
      } catch (error) {
        console.log(error)
      }
      console.log(this.form.data)
      console.log('bigdata', this.bigdata)
    }
  }
</script>
<style lang="less" scoped>
  .highlight {
    background-color: yellow;
  }

  .ehl_view {
    width: 100%;
    height: 100%;
    // background-color: black;

    .ehl_view_item {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 20px;
      // overflow: auto;
      background: rgb(255, 234, 255);

      .qqqqqq {
        width: 400px;
      }

      .slot_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
      }

      .qwqwqwqwqwqw {
        .label_slot {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }

    /deep/ .my_dialog {
      width: 30%;
      height: 150px;
    }
  }
</style>
